<template>
  <div>
    <el-breadcrumb
      style="margin: 5px 0px 0px 30px"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/userInformation' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ddlb' }">订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="oderList">
      <li><b>订单号:</b>{{ order.ordersn }}</li>
      <li>
        <b>订单状态:</b
        >{{
          order.orderstate == 3
            ? "已发货"
            : order.orderstate == 2
            ? "已支付"
            : "未支付"
        }}
      </li>
      <li><b>送货地址:</b>{{ order.sendaddress }}</li>
      <li><b>订单时间:</b>{{ order.ordertime | formatDate }}</li>
      <li style="margin-top:100px"><b>商品名</b><b>商品价格</b><b>商品数量</b></li>
      <li v-for="(item, i) in orderdetailList" :key="i" >
         
          <tr class="content">
              <td>{{ item.foodname }}</td>
              <td style="text-align:center">{{ item.foodprice }}</td>
              <td style="text-align:right">{{ item.foodnum?item.foodnum:1 }}</td>
          </tr>
        
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    this.getOrderAndUser();
    //   console.log(this.$route.query);
  },
  mounted() {
    this.getOrderFood();
  },
  data() {
    return {
      user: {},
      order: [],
      orderdetailList:[],
      pinFood:{}
    };
  },

  methods: {
    //   提示
     open2() {
        this.$message({
          message: '该商品已下架！',
          type: 'warning'
        });
      },
    //   获取订单和当前用户
    getOrderAndUser() {
      this.order = JSON.parse(window.sessionStorage.getItem("order"));
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      console.log(this.order);
    },
    // 2种购买方式（拼单和购物车）
    getOrderFood() {
      if (!this.order.foodid) {
        let that = this;
        this.$http
          .get("FoodWeb/getOrderdetailListByOrderAction.action", {
            params: {
              ordersn: this.order.ordersn,
              userid: this.user.userId,
              token: this.user.token,
            },
          })
          .then((result) => {       
            that.orderdetailList = result.data.orderdetailList;
            console.log(result);
          });
      } else {
        let that = this;
        this.$http
          .get("FoodWeb/getFoodAction.action", {
            params: {
             foodid:that.order.foodid
            },
          })
          .then((res) => {
              if(res.data.errorcode!=1){
                  that.orderdetailList.push(res.data.food) 
                 console.log(res);
              }else{
                  that.open2()
              }
            
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.oderList {
  display: flex;
  width: 550px;
  flex-direction: column;
  list-style: none;
  margin: 70px auto 0px;
  li {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content{
        width: 100%;
        display: flex;
        flex-direction: row;
        td{flex: 1;}
        
    }
  }
  li:nth-of-type(odd) {
    background-color: #f8f8f8;
  }
}
</style>
